<template>
    <view>
        <!-- parse <template is="myJoinDetailTpl" :data="skin,id,isLoad,isShowHome,join,qrImageData"/> -->
        <block name="myJoinDetailTpl">
            <view v-if="isLoad === null" class="margin-top load notexist text-l load-project"></view>
            <view v-if="isLoad === false" class="margin-top load loading text-l load-project"></view>

            <block v-if="isLoad">
                <view class="main padding-project">
                    <view class="text-pic-list-box margin-top-xs">
                        <view class="item card-project shadow-project">
                            <view class="title-line" @tap="url" :data-url="'../../meet/detail/meet_detail?id=' + join.JOIN_MEET_ID">
                                <view class="title content-cut-two">{{ join.JOIN_MEET_TITLE }}</view>
                                <view class="arrow"><text class="icon-right"></text></view>
                            </view>

                            <view class="author">
                                <text class="icon-remind margin-right-xs text-s"></text>
                                <text class="text-cut">{{ join.JOIN_MEET_DAY }} {{ join.JOIN_MEET_TIME_START }}～{{ join.JOIN_MEET_TIME_END }}</text>
                            </view>
                            <view class="data">
                                <text v-if="join.JOIN_STATUS == 1" class="text-green">
                                    <text class="icon-newshot margin-right-xxs"></text>
                                    预约成功{{ join.JOIN_IS_CHECKIN == 1 ? '，已签到' : '' }}
                                </text>

                                <button
                                    v-if="(join.JOIN_STATUS == 1 || join.JOIN_STATUS == 0) && join.JOIN_IS_CHECKIN == 0"
                                    @tap="bindCancelTap"
                                    class="btn mid bg-grey light margin-left-s"
                                >
                                    <text class="icon-close"></text>
                                    取消预约
                                </button>

                                <text v-if="join.JOIN_STATUS == 10" class="text-grey">
                                    <text class="icon-bad margin-right-xxs"></text>
                                    已取消
                                </text>

                                <block v-if="join.JOIN_STATUS == 99">
                                    <text class="text-orange">
                                        <text class="icon-bad margin-right-xxs"></text>
                                        系统取消
                                        <text class="text-grey" v-if="join.JOIN_REASON">：{{ join.JOIN_REASON }}</text>
                                    </text>
                                </block>
                            </view>

                            <view class="oprt" v-if="join.JOIN_STATUS == 0 || join.JOIN_STATUS == 1">
                                <view @tap="url" data-url="../../my/index/my_index" data-type="relaunch" v-if="isShowHome" class="btn margin-right-s">返回首页</view>
                                <view @tap="bindCalendarTap" class="btn">加入手机日程</view>
                            </view>
                        </view>
                    </view>

                    <view class="info-list-box" v-if="join.JOIN_STATUS == 1">
                        <view class="item card-project shadow-project">
                            <view class="info">
                                <view class="center">
                                    <text class="text-bold margin-right-s">预约码</text>
                                    (向工作人员出示进行核销)
                                </view>
                            </view>
                            <view class="info">
                                <view class="center">
                                    <image :show-menu-by-longpress="true" :src="qrImageData" class="loading" />
                                </view>
                            </view>
                        </view>
                    </view>

                    <view class="info-list-box margin-bottom-xxl">
                        <view class="item card-project shadow-project">
                            <view class="info margin-bottom-s">
                                <view class="center text-bold">预约信息</view>
                            </view>
                            <view class="info" v-for="(item, index) in join.JOIN_FORMS" :key="index">
                                <view class="title">{{ item.title }}：</view>

                                <view class="content">{{ item.val }}</view>
                            </view>

                            <view class="info text-grey margin-top-xs text-s">提交时间：{{ join.JOIN_ADD_TIME }}</view>
                        </view>
                    </view>
                </view>
            </block>
        </block>
    </view>
</template>

<script>
let behavior = require('../../../../behavior/my_join_detail_bh.js');
let PassortBiz = require('../../../../biz/passport_biz.js');
let skin = require('../../skin/skin.js');
export default {
    data() {
        return {
            isLoad: '',

            join: {
                JOIN_MEET_ID: '',
                JOIN_MEET_TITLE: '',
                JOIN_MEET_DAY: '',
                JOIN_MEET_TIME_START: '',
                JOIN_MEET_TIME_END: '',
                JOIN_STATUS: 0,
                JOIN_IS_CHECKIN: 0,
                JOIN_REASON: '',
                JOIN_FORMS: [],
                JOIN_ADD_TIME: ''
            },

            isShowHome: false,
            qrImageData: ''
        };
    },
    mixins: [behavior],
    onReady: function () {
        PassortBiz.initPage({
            skin,
            that: this,
            isLoadSkin: true
        });
    },
    methods: {
        url() {
            console.log('占位：函数 url 未声明');
        },

        bindCancelTap() {
            console.log('占位：函数 bindCancelTap 未声明');
        },

        bindCalendarTap() {
            console.log('占位：函数 bindCalendarTap 未声明');
        }
    }
};
</script>
<style>
@import './my_join_detail.css';
@import 'undefined';
</style>
